<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   <meta charset="UTF-8">
		<title>教师信息</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template">
	    <meta name="author" content="GeeksLabs">
	    <meta name="keyword" content="Creative, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal">
	    <link rel="shortcut icon" href="img/favicon.png">
	
	    <title>Creative - Bootstrap Admin Template</title>
	

  </head>
  
  <body>
  	
    	<c:import url="admin_home.jsp"></c:import>
     	
     	<!-- 新增教师模态框 -->
     	<!-- Modal -->
		<div class="modal fade bs-example-modal-lg" id="empAddModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" style="margin-right: 1000px" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">新增教师</h4>
		      </div>
		      <div class="modal-body">
		        <form class="form-horizontal">
				  <div class="form-group">
				    <label  class="col-sm-3 control-label">教师工号</label>
				    <div class="col-sm-5">
				      <input type="text" class="form-control" id="teaId" name="teaId" placeholder="例如:tea2018**">
				    </div>
				  </div>
				  <div class="form-group">
				    <label  class="col-sm-3 control-label">教师姓名</label>
				    <div class="col-sm-5">
				      <input type="text" class="form-control" id="teaName" name="teaName" placeholder="输入教师姓名">
				    <span id="helpBlock2" class="help-block"></span>
				    </div>
				  </div>
				  <div class="form-group">
				    <label  class="col-sm-3 control-label">性别</label>
				    <div class="col-sm-5">
				      <label class="radio-inline">
						  <input type="radio" name="teaSex" id="teaSex" value="男" checked="checked">男
						</label>
						<label class="radio-inline">
						  <input type="radio" name="teaSex" id="teaSex" value="女">女
						</label>
				    </div>
				  </div>
				  <div class="form-group">
				    <label  class="col-sm-3 control-label">教师职称</label>
				    <div class="col-sm-5">
				      <select class="form-control" name="teaRole" id="teaRole">
						  <option value="0">讲师</option>
						  <option value="1">副教授</option>
						  <option value="2">教授</option>
						  <option value="3">院长</option>
						</select>
				    </div>
				  </div>
				  <div class="form-group">
				    <label  class="col-sm-3 control-label">教师邮箱</label>
				    <div class="col-sm-5">
				      <input type="text" class="form-control" id="teaEmail" name="teaEmail" placeholder="输入教师Email">
				    	<span id="helpBlock2" class="help-block"></span>
				    </div>
				  </div>
				  <div class="form-group">
				    <label  class="col-sm-3 control-label">教师联系方式</label>
				    <div class="col-sm-5">
				      <input type="text" class="form-control" id="teaTell" name="teaTell" placeholder="输入教师联系方式">
				    	<span id="helpBlock2" class="help-block"></span>
				    </div>
				  </div>
				</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary" id="save_btn">保存</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		<!-- 页面内容 -->
     	<div class="layui-body container" style="margin-top: 100px">
     		<!-- 搜索框 -->
     		<div class="layui-row" >
     			<form class="layui-form">
     				<div class="layui-form-item">
					  	<div class="layui-input-inline layui-col-md-offset2 layui-col-md4">
					     	<input type="text" id="input_teaName" name="teaName" lay-verify="required" placeholder="输入教师姓名" autocomplete="off" class="layui-input">
					     </div>
					     <div class="layui-col-md4">
					     <button id="btn_selectTea" type="button" class="btn btn-info">查询</button>
					     </div>
					</div>
				</form>
			</div>
			
     		<!-- 显示表格数据 -->
     		<div class="layui-row">
	     		<div class="layui-col-md-offset10 layui-col-md1">
		     		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#empAddModel" id="addTea_modal">
					 	 新增教师
					</button>
	     		</div>
     			<div class="layui-col-md-offset1 layui-col-md10">
     				<table class="table table-hover" id="teaTable">
     					<thead>
     					<tr>
     						<th>ID</th>
     						<th>教师工号</th>
     						<th>姓名</th>
     						<th>性别</th>
     						<th>职称</th>
     						<th>邮箱</th>
     						<th>联系方式</th>
     						<th>操作</th>
     					</tr>
     					</thead>
     					<tbody>
     					
     					</tbody>
     					</table>
     			</div>
     		</div>
     		
     		<!-- 分页条 -->
     		<div class="layui-row">
     			<div class="layui-col-md-offset1 layui-col-md3" id="page_info_area">
     			</div>
     			<div class="col-md-5" id="page_info_nav">
     			</div>
     		</div>
     	</div>
     	
		<script type="text/javascript">
		
		function Msg(isSuccess,info){
			this.isSuccess=isSuccess;
			this.info=info;
		}
		
		//新增教师
		var totalRecord;
		$("addTea_modal").click(function(){
			$("#empAddModel").modal({
				backdrop:"static"
			});
		});
		//新增教师表单数据校验
		function validate_add_form(){
			var teaName=$("#teaName").val();
			var teaEmail=$("#teaEmail").val();
			var teaTell=$("#teaTell").val();
			var regName=/^[\u4E00-\u9FA5]{2,4}$/;
			var regEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
			var regTell=/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
			if(!regName.test(teaName)){
				show_validate_msg("#teaName","error","姓名只能是汉字");
				return false;
			}else{
				show_validate_msg("#teaName","success","");
			};
			if(!regEmail.test(teaEmail)){
				show_validate_msg("#teaEmail","error","请输入正确邮箱格式");
				return false;
			}else{
				show_validate_msg("#teaEmail","success","");
			};
			if(!regTell.test(teaTell)){
				show_validate_msg("#teaTell","error","请输入正确手机号格式");
				return false;
			}else{
				show_validate_msg("#teaTell","success","");
			};
			return true;
		}
		//校验提示信息
		function show_validate_msg(ele,status,msg){
			//清楚当前元素状态
			$(ele).parent().removeClass("has-success has-error");
			$(ele).next("span").text("");
			
			if("success"==status){
				$(ele).parent().addClass("has-success");
				$(ele).next("span").text("");
			}else if("error"==status){
				$(ele).parent().addClass("has-error");
				$(ele).next("span").text(msg);
			}
		}
		//保存新增教师信息
		$("#save_btn").click(function(){
			var b=validate_add_form();
			if(b==false){
				return false;
			};
				$.ajax({
					url:"${pageContext.request.contextPath}/admin/saveTea.do",
					type:"POST",
					data:$("#empAddModel form").serialize(),
					success:function(result){
						$("#empAddModel").modal("hide");
						toPage(totalRecord);
					}
				});
		});
	    $(function(){
	    	toPage(1);
	    });
	    //查询教师
	    $("#btn_selectTea").click(function(){
	    	var teaName=$("#input_teaName").val();
	    	console.log(teaName);
	    	$.ajax({
	    		url:"${pageContext.request.contextPath}/admin/teaInfoList.do",
	    		data:{"pageNum":1,"teaName":teaName},
	    		type:"GET",
	    		success:function(result){
	    			build_tableInfo(result);
	    		}
	    	});
	    });
	    function toPage(pn){
	    	$.ajax({
	    		url:"${pageContext.request.contextPath}/admin/teaInfoList.do",
	    		data:"pageNum="+pn,
	    		type:"GET",
	    		success:function(result){
	    			//console.log(result);
	    			//1.解析并显示数据
	    			build_tableInfo(result);
	    			//2.解析显示分页信息
	    			build_pageInfo(result);
	    			build_page_nav(result);
	    			
	    		}
	    	});
	    }
	    
	    //解析显示分页信息
	    function build_tableInfo(result){
	    	$("#teaTable tbody").empty();
	    	var teaInfo=result.extend.page.list;
	    	$.each(teaInfo,function(index,tea){
	    		var id=$("<td></td>").append(tea.id);
	    		var teaId=$("<td></td>").append(tea.teaId);
	    		var teaName=$("<td></td>").append(tea.teaName);
	    		var teaSex=$("<td></td>").append(tea.teaSex);
	    		var role="讲师";
	    		if(tea.teaRole==1){
	    			role="副教授";
	    		}else if(tea.teaRole==2){
	    			role="教授";
	    		}else if(tea.teaRole==3){
	    			role="院长";
	    		}
	    		var teaRole=$("<td></td>").append(role);
	    		var teaEmail=$("<td></td>").append(tea.teaEmail);
	    		var teaTell=$("<td></td>").append(tea.teaTell);
	    		var editBtn=$("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append("编辑");
	    		var delBtn=$("<button></button>").addClass("btn btn-danger btn-sm delete_btn").append("删除");
	    		var btnTd=$("<td></td>").append(editBtn).append(" ").append(delBtn);
	    		$("<tr></tr>").append(id).append(teaId).append(teaName).append(teaSex)
	    					.append(teaRole).append(teaEmail).append(teaTell).append(btnTd).appendTo("#teaTable tbody");
	    	});
	    }
	    //解析显示分页信息
	    var currentPage;
	    function build_pageInfo(result){
	    	$("#page_info_area").empty();
	    	currentPage=result.extend.page.pageNum;
	    	$("#page_info_area").append("当前"+result.extend.page.pageNum+"页，共"+result.extend.page.pages+"页,一共"+result.extend.page.total+"条记录");
	    	totalRecord=result.extend.page.total;
	    }
	    
	    function build_page_nav(result){
	    	$("#page_info_nav").empty();
	    	var ul=$("<ul></ul>").addClass("pagination");
	    	var firstPage=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
	    	var prePage=$("<li></li>").append($("<a></a>").append("上一页"));
			if(result.extend.page.hasPreviousPage==false){
				firstPage.addClass("disabled");  
				prePage.addClass("prePage");
	    	}
			firstPage.click(function(){
				toPage(1);
			});
			prePage.click(function(){
				if(result.extend.page.pageNum==1){
					toPage(1);
				}else{
					toPage(result.extend.page.pageNum-1);
				}
				
			});
	    	var nextPage=$("<li></li>").append($("<a></a>").append("下一页"));
	    	var lastPage=$("<li></li>").append($("<a></a>").append("尾页").attr("href","#"));
	    	if(result.extend.page.hasNextPage==false){
	    		nextPage.addClass("disabled");  
	    		lastPage.addClass("prePage");
	    	}
	    	lastPage.click(function(){
				toPage(result.extend.page.pages);
			});
	    	nextPage.click(function(){
	    		if(result.extend.page.pageNum==result.extend.page.pages){
	    			toPage(result.extend.page.pages);
	    		}else{
	    			toPage(result.extend.page.pageNum+1);
	    		}
				
			});
	    	ul.append(firstPage).append(prePage);
	    	$.each(result.extend.page.navigatepageNums,function(index,item){
	    		var numLi=$("<li></li>").append($("<a></a>").append(item));
	    		if(result.extend.page.pageNum==item){
	    			numLi.addClass("active");
	    		}
	    		numLi.click(function(){
	    			toPage(item);
	    		});
	    		ul.append(numLi);
	    	});
	    	ul.append(nextPage).append(lastPage);
	    	var navElv=$("<nv></nv>").append(ul);
	    	navElv.appendTo("#page_info_nav");
	    }
	    //删除
	    $(document).on("click",".delete_btn",function(){
	    	var teaId=$(this).parents("tr").find("td:eq(1)").text();
	    	if(confirm("确认删除工号为："+teaId+"的教师吗？")){
	    		$.ajax({
	    			url:"${pageContext.request.contextPath}/admin/deleteTea.do",
	    			data:"teaId="+teaId,
	    			type:"GET",
	    			success:function(result){
	    				console.log("result:"+result);
	    				toPage(currentPage);
	    			}
	    		});
	    	}
	    });
	    
		//layui
		layui.use('form', function(){
		  var form = layui.form;
		  
		});
	  </script>
  </body>
</html>
